<template>
  <div style="padding: 10px">
    <div>
      <a-breadcrumb
        style="font-size: 18px; font-weight: bold; margin-bottom: 20px"
      >
        <a-breadcrumb-item>链上市场</a-breadcrumb-item>
        <a-breadcrumb-item>当日市场走势</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div style="margin: 0 auto; text-align: center">
      <div ref="chart1" style="width: 100%; height: 500px"></div>
      <a-divider />
      <div ref="chart2" style="width: 100%; height: 500px"></div>
    </div>
  </div>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";
import { onMounted } from "vue";
import { reactive, ref } from "vue";
import moment from "moment";
import { useRouter } from "vue-router";
import { get, del, post, getBlob, tip, removeLocalToken, ddo } from "@/common";

export default {
  setup() {
    const state = reactive({
      //创建响应式数据对象和相关数据
      id: 1,
      chart1: ref(),
      chart2: ref(),
      chart3: ref(),
      chart4: ref(),
      data1: ref([]),
      data2: ref([]),
      data3: ref([]),
      data4: ref([]),
    });

    const init = () => {
      //定义方法
      if (state.chart1) {
        //图标初始化
        var myChart = echarts.init(state.chart1);
        const option1 = {
          title: {
            text: "撮合交易总量情况",
            left: "center",
          },
          toolbox: {
            left: "80%",
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false, title: "查看源数据" },
              saveAsImage: { show: true, title: "另存为图片" },
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          xAxis: {
            boundaryGap: false,
            type: "category",
            data: [
              "0",
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
            ],
          },
          yAxis: {
            
            type: "value",
          },
          series: [
            {
              data: state.data1,
              type: "line",
            },
          ],
        };
        //指定配置项与数据显示
        myChart.setOption(option1);
      }
      if (state.chart2) {
        //图标初始化
        var myChart = echarts.init(state.chart2);
        const option2 = {
          title: {
            text: "成交价情况",
            left: "center",
          },
          toolbox: {
            left: "80%",
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false, title: "查看源数据" },
              saveAsImage: { show: true, title: "另存为图片" },
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: ["最高成交价", "最低成交价", "平均成交价"],
            left: 10,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "0",
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
            ],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "最高成交价",
              data: state.data2,
              type: "line",
            },
            {
              name: "最低成交价",
              data: state.data3,
              type: "line",
            },
            {
              name: "平均成交价",
              data: state.data4,
              type: "line",
            },
          ],
        };
        //指定配置项与数据显示
        myChart.setOption(option2);
      }
    };
    // 生命周期函数
    onMounted(() => {
      getReportData();
      init();
    });
    const getReportData = () => {
      get("/trade/tradeInfo/getTimeSlot").then((res) => {
        console.log(res);
        state.data1 = res.data.tradingVolumes;
        state.data2 = res.data.maxPrices;
        state.data3 = res.data.minPrices;
        state.data4 = res.data.averagePrices;
        init();
      });
    };
    return state;
  },
};
</script>
<style>
.div-inline {
  display: inline;
}
</style>